import axios from "axios";
import React, { useEffect, useState } from "react";
import { TabRowState } from "../../types";
import { Sidebar } from "react-vant";
import { ListItem } from "../../components";
import { useNavigate } from "react-router-dom";

const Classify = () => {
  const [tabData, setTabData] = useState<TabRowState[]>([]);
  const navigate = useNavigate();
  const fetchTabData = async () => {
    try {
      const resp = await axios.get("/api/tab");
      setTabData(resp.data.data);
    } catch {}
  };

  useEffect(() => {
    fetchTabData();
  }, []);

  return (
    <div>
      <Sidebar>
        {tabData.map((v) => {
          return (
            <Sidebar.Item title={v.title} key={v.id}>
              <div className="tab-right">
                {v.children.map((v) => {
                  return (
                    <ListItem
                      key={v.id}
                      v={v}
                      onClick={() => navigate(`/detail/${v.id}`, { state: v })}
                    ></ListItem>
                  );
                })}
              </div>
            </Sidebar.Item>
          );
        })}
      </Sidebar>
    </div>
  );
};

export default Classify;
